<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06 时间差</title>
</head>
<body>
    <h1>两个时间差</h1>
    <input type="date" id="start">
    <input type="date" id="end">
    <input type="button" id="btn" value="两个时间差">
    <div id="output"></div>
</body>
<script>

    /*
        日期对象提供的方法
            * getTime() 获取纪元时间
            * Date.parse("2015-05-26") 返回指定日期距1970-1-1零时的毫秒数
            * Date.now(); 返回执行这行代码时距1970-1-1零时的毫秒数
    
    */

    (function() {

        // 找节点
        var start = document.getElementById('start');
        var end = document.getElementById('end');
        var btn = document.getElementById('btn');
        var output = document.getElementById('output');

        // 把字符串的时间转成毫秒数
        var date = new Date();
        // console.log(date.getTime());

        // 字符串转成日期
        var str = '2015-1-5';

        // 方法一
        var date1 = new Date(str); // 先把字符串转成日期对象
        console.log(date1.getTime());

        // 方法二
        var num = Date.parse(str);
        console.log(num);

        /*
            需求：
                * 点击按钮，获取时间
                * 求两个时间的纪元时间，再相减
                * 差值还是毫秒数，转成指定的格式 
                
        */

        btn.onclick = function() {
            var startTime = start.value;
            var endTime = end.value;
            console.log(startTime, endTime);

            if (startTime && endTime) {
                // 求差值,先转成毫秒数再相减
                var startTime1 = Date.parse(startTime);
                var endTime1 = Date.parse(endTime);

                var dis = endTime1 - startTime1;

                var day = parseInt(dis/1000/60/60/24);

                output.innerHTML = '相差' + day + '天'; 
            } else {
                alert('请选择日期');
            }
        }


    })();

</script>
</html>